<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            display: flex;
            width: 820px;
            height: 420px;
            background: #c4c4c4;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        ul{ 
            display: flex;
            flex-wrap: wrap;
            width: 800px;
            height: 400px;
            list-style: none;
           
            background: greenyellow;
            
        }
        ul li img{
            display: block;
            width: 100%;
            height: 100%;
        }
        ul li{
            position: relative;
            width: 200px;
            height: 200px;
            box-shadow: -2px -2px 1px #fff,2px 2px 1px #fff;

        }
         .mould{
            width: 200px;
            height: 200px;
            background: rgba(26, 24, 24, 0.849);
            
             position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: 2s; 
        }
        .mould div{
            text-align: center;
            margin: 50px 50px;
          
         
        }
        .mould p{
            font-size: 14px;
            color: #fff;
            margin-bottom: 10px;
        }
        .mould div a{
                text-decoration: none;
                padding: 5px 10px;
                background: red;
                border-radius: 10px;
                font-size: 10px;
                color: #fff;
        }
        li:hover .mould{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <img src="../image/bg/bg7.jpg" alt="">
                <div class="mould">
                    <div>
                        <p>前程似锦</p>
                        <a href="">点击进入</a>
                    </div>
                </div>
            </li>
            <li>
                <img src="../image/bg/bg12.jpg" alt="">
                <div class="mould">
                    <div>
                        <p>前程似锦</p>
                        <a href="">点击进入</a>
                    </div>
                </div>
            </li>
            <li>
                <img src="../image/bg/bg13.jpg" alt="">
                <div class="mould">
                    <div>
                        <p>前程似锦</p>
                        <a href="">点击进入</a>
                    </div>
                </div>
            </li>
            <li>
                <img src="../image/bg/bg10.jpg" alt="">
                <div class="mould">
                    <div>
                        <p>前程似锦</p>
                        <a href="">点击进入</a>
                    </div>
                </div>
            </li>
            <li>
                <img src="../image/bg/bg3.jpg" alt="">
                <div class="mould">
                    <div>
                        <p>前程似锦</p>
                        <a href="">点击进入</a>
                    </div>
                </div>
            </li>
            <li>
                <img src="../image/bg/bg4.jpg" alt="">
                <div class="mould">
                    <div>
                        <p>前程似锦</p>
                        <a href="">点击进入</a>
                    </div>
                </div>
            </li>
            <li>
                <img src="../image/bg/bg7.jpg" alt="">
                <div class="mould">
                    <div>
                        <p>前程似锦</p>
                        <a href="">点击进入</a>
                    </div>
                </div>
            </li>
            <li>
                <img src="../image/bg/bg8.jpg" alt="">
                <div class="mould">
                    <div>
                        <p>前程似锦</p>
                        <a href="">点击进入</a>
                    </div>
                </div>
            </li>

        </ul>
    </div>
</body>
</html>